<template>
	<view class="layout-column-center">
		<view class="logo-area layout-column-center">
			<image src="../../static/logo.png"></image>
			<view class="layout-around head-nav">
				<view :class="type==1?'active':''" @click="checkIndex(1)">登录</view>
				<view :class="type==2?'active':''" @click="checkIndex(2)">注册</view>
			</view>
		</view>
		<view class="form-content">
			<u--form :model="model" :rules="rules" ref="uForm">
				<u-form-item prop="username">
					<u-input v-model="model.username" placeholder="请输入您的手机号" clearable shape="circle">
						<template slot="prefix">
							<image src="../../static/mobile.png"
								style="width: 48rpx; height: 48rpx;margin-left: 23rpx;"></image>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item prop="password">
					<u-input placeholder="请输入您的密码" type="password" clearable shape="circle" v-model="model.password">
						<template slot="prefix">
							<image src="../../static/password.png"
								style="width: 45rpx; height: 45rpx;margin-left: 23rpx;"></image>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item v-if="type==2" prop="jobType">
					<u-input placeholder="请输入工种" v-model="model.jobType" clearable shape="circle">
						<template slot="prefix">
							<image src="../../static/jobType.png"
								style="width: 45rpx; height: 45rpx;margin-left: 23rpx;"></image>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item v-if="type==2" prop="idCard">
					<u-input placeholder="请输入身份证号" v-model="model.idCard" clearable shape="circle">
						<template slot="prefix">
							<image src="../../static/idCard.png"
								style="width: 55rpx; height: 45rpx;margin-left: 23rpx;"></image>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item v-if="type==2" prop="deptName">
					<u-input placeholder="请输入工区" v-model="model.deptName" clearable shape="circle">
						<template slot="prefix">
							<image src="../../static/deptName.png"
								style="width: 45rpx; height: 45rpx;margin-left: 23rpx;"></image>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item v-if="type==2" prop="employeeId">
					<u-input placeholder="请输入工号" v-model="model.employeeId" clearable shape="circle">
						<template slot="prefix">
							<image src="../../static/employeeId.png"
								style="width: 45rpx; height: 40rpx;margin-left: 23rpx;"></image>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item v-if="type==2" prop="cardNo">
					<u-input placeholder="请输入卡号" v-model="model.cardNo" clearable shape="circle">
						<template slot="prefix">
							<image src="../../static/cardNo.png"
								style="width: 45rpx; height: 40rpx;margin-left: 23rpx;"></image>
						</template>
					</u-input>
				</u-form-item>
			</u--form>
		</view>
		<view class="btn-area layout-column-center">
			<view class="btn-item">
				<button v-if="type==1" class="login-btn" @click="toLogin()" :loading="loading">登录</button>
				<button class="login-btn" v-if="type==2" @click="toRegister()">注册</button>
			</view>
			<view class="bottom-area layout-between">
				<radio-group @change="netWork" class="layout-between">
					<label v-for="(item, index) in items" :key="item.value" class="layout-between  mr40">
						<view>
							<radio :value="item.value" :checked="index === current"></radio>
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<view class="bottom-area layout-between" v-if="type==1">
				<checkbox-group @change="remember()">
					<label>
						<checkbox :checked="isRemember">记住密码</checkbox>
					</label>
				</checkbox-group>
			</view>
			<view class="bottom-area" v-if="type==2">
				<checkbox-group @change="selectgoods()">
					<label>
						<checkbox :checked="allchecked">我已阅读并同意遵守《用户协议》</checkbox>
					</label>
				</checkbox-group>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		login,
		register
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				isRemember: false,
				loading: false,
				model: {
					username: '',
					password: '',
					jobType: '', //工种
					idCard: '', //身份证号,
					deptName: '', //工区
					cardNo: '', //卡号
					employeeId: '', //工号
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					}],
					jobType: [{
						required: true,
						message: '请输入工种',
						trigger: ['change', 'blur'],
					}],
					idCard: [{
						required: true,
						message: '请输入身份证号',
						trigger: ['change', 'blur'],
					}],
					deptName: [{
						required: true,
						message: '请输入工区',
						trigger: ['change', 'blur'],
					}],
					cardNo: [{
						type: 'number',
						required: true,
						message: '请输入卡号',
						trigger: ['change', 'blur'],
					}],
					employeeId: [{
						required: true,
						message: '请输入工号',
						trigger: ['change', 'blur'],
					}],
				},
				type: 1, //1密码登录，2注册
				allchecked: false,
				//// value: 'http://192.168.59.102:5389',
				items: [{
						value: 'http://192.168.3.72:5389',
						name: '内网',
						checked: true,
					},
					{
						value: 'http://192.168.60.238:5389',
						name: 'wifi'
					}
				],
				current: 0,
			}
		},
		mounted() {
			this.getStorageInfo()
		},
		methods: {
			remember() {
				this.isRemember = !this.isRemember
			},
			//点击登录按钮
			toLogin() {
				this.$refs.uForm.validate().then(res => {
					this.loading = true
					login({
						userName: this.model.username,
						password: this.model.password
					}).then(s => {
						if (s.code === 20000) {
							if (this.isRemember) {
								uni.setStorageSync('userMobile', this.model.username)
								uni.setStorageSync('userPassword', this.model.password)
							} else {
								uni.removeStorageSync('userMobile')
								uni.removeStorageSync('userPassword')
							}
							uni.setStorageSync("token", s.data.token)							
							uni.setStorageSync("userinfo", s.data.user)
							uni.showToast({
								title: '登录成功',
								icon: 'none',
								duration: 1000
							})
							// uni.switchTab({
							// 	url: "../evaluationReaults/evaluationReaults"
							// })
							uni.navigateTo({
								url: '/pages/evaluationReaults/evaResults'
							})
							// const authDegree = s.data.user.authDegree;
							// // 关键点：重新初始化TabBar 
							// if (authDegree == 1) {
							// 	uni.reLaunch({ // 强制重启应用使新TabBar生效   
							// 		url: 'pages/evaluationReaults/evaluationReaults'
							// 	});
							// }
						} else {
							this.loading = false
							uni.showToast({
								title: s.message,
								icon: 'none'
							})
						}
					});
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			//获取缓存信息
			getStorageInfo() {
				//缓存的账号
				const userMobile = uni.getStorageSync('userMobile');
				//缓存的密码
				const userPassword = uni.getStorageSync('userPassword');
				//有缓存就赋值给文本,没有就清空
				if (userMobile && userPassword) {
					this.model.username = userMobile;
					this.model.password = userPassword;
					this.isRemember = true
				} else {
					this.model.username = '';
					this.model.password = '';
				}
			},
			checkIndex(index) {
				if (index == 1) {
					//密码登录
					this.type = index
				} else {
					//注册
					this.type = index
					this.model.username = ''
					this.model.password = ''

				}
			},
			toRegister() {
				this.$refs.uForm.validate().then(res => {
					if (this.allchecked) {
						register({
							username: this.model.username,
							password: this.model.password,
							jobType: this.model.jobType,
							idCard: this.model.idCard,
							deptName: this.model.deptName,
							cardNo: this.model.cardNo,
							employeeId: this.model.employeeId
						}).then(s => {
							if (s.code === 20000) {
								uni.showToast({
									title: '注册成功',
									icon: 'none'
								})
								this.checkIndex(1) //注册成功后登录
								// uni.setStorageSync("token", s.data.token)
								// uni.setStorageSync("userinfo", s.data.user)								
							} else {
								uni.showToast({
									title: s.msg,
									icon: 'none'
								})
							}
						});
					} else {
						uni.showToast({
							title: '请先同意用户服务协议',
							icon: 'none'
						})
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			selectgoods() {
				this.allchecked = !this.allchecked
			},
			netWork(evt) {
				console.log("evt", evt);
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						uni.setStorageSync('netVal', evt.detail.value)
						break;
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.logo-area {
		margin-top: 60rpx;
		width: 100%;
		position: relative;

		image {
			width: 170rpx;
			height: 170rpx;
			border-radius: 80rpx;
		}

		.login-title {
			margin-top: 40rpx;
			font-size: 48rpx;
			color: #C39A54;
			font-weight: bold;
		}

		.head-nav {
			margin-top: 40rpx;
			width: 80%;
			font-size: 36rpx;
			font-family: PingFang SC;
			color: #999999;

			.active {
				color: #1C4BB6;
				position: relative;
				font-weight: bold;
			}

			.active::after {
				content: "";
				position: absolute;
				left: 10rpx;
				bottom: -15rpx;
				width: 100%;
				background: #1C4BB6;
				width: 40rpx;
				height: 6rpx;
				border-radius: 3px;
			}
		}

	}

	.form-content {
		margin-top: 60rpx;
		width: 80%;
		position: relative;

		.u-form-item /deep/.u-input {
			height: 70rpx;
		}
	}

	.btn-area {
		position: relative;
		width: 100%;

		.btn-item {
			margin-top: 60rpx;
			width: 80%;

			.login-btn {
				background: #1C4BB6;
				color: #ffffff;
				border-radius: 47rpx;
				border: 0;
			}
		}
	}

	.bottom-area {
		margin-top: 30rpx;
		width: 80%;
		font-size: 30rpx;
		white-space: nowrap;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	uni-checkbox /deep/ .uni-checkbox-input {
		width: 26rpx;
		height: 26rpx;
		border: 1px solid #777777;
		border-radius: 0;
		position: relative;
	}

	.mr40 {
		margin-right: 40rpx;
	}

	/deep/.uni-radio-input-checked {
		background-color: #1C4BB6 !important;
		border-color: #1C4BB6 !important;
	}
</style>